<template>
  <div class="Word">
    <div class="zz-content mc clearfix pd-28" align="center">
      <div class="demo mc">
        <h2>PageOffice 实现Word文档的在线编辑保存和全文关键字搜索</h2>
      </div>

      <div class="demo mc">
        <h3 class="fs-12">搜索文件</h3>
        <!-- <form id="form1" action="index" method="get"> -->
        <form id="form1">
          <table class="text" cellspacing="0" cellpadding="0" border="0">
            <tr>
              <td style="font-size: 9pt" align="left">
                通过文档内容中的关键字搜索文档&nbsp;&nbsp;&nbsp;
              </td>
              <td align="center">
                <input
                  name="Input_KeyWord"
                  id="Input_KeyWord"
                  type="text"
                  @focus="getFocus()"
                  @blur="lostFocus()"
                  class="boder"
                  style="width: 180px"
                  value="请输入关键字"
                />
              </td>
              <td style="width: 221px">
                &nbsp;
                <input
                  type="button"
                  value="搜索"
                  @click="mySubmit()"
                  style="width: 86px"
                />
              </td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td colspan="2">
                &nbsp;<span style="color: Gray">热门搜索：</span>
                <a
                  href="#"
                  style="color: #00217d"
                  @click="copyKeyToInput('网站')"
                  >网站</a
                >&nbsp;
                <a
                  href="#"
                  style="color: #00217d"
                  @click="copyKeyToInput('软件')"
                  >软件</a
                >&nbsp;
                <a
                  href="#"
                  style="color: #00217d"
                  @click="copyKeyToInput('字体')"
                  >字体</a
                >
              </td>
            </tr>
          </table>
        </form>
      </div>

      <div class="zz-talbeBox mc">
        <h3 class="fs-12">文档列表</h3>

        <table class="zz-talbe">
          <thead>
            <tr>
              <th width="90%">文档名称</th>
              <th width="100%">操作</th>
            </tr>
          </thead>

          <tbody>
            <tr v-for="docSearch in docSearchs" :key="docSearch.id">
              <td>{{ docSearch.fileName }}</td>
              <td>
                <a @click="editWord(docSearch.id)">编辑</a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: "Word",
  data() {
    return {
      docSearchs: {},
      value: "",
    };
  },
  created: function () {
    //由于vue中的axios拦截器给请求加token都得是ajax请求，所以这里必须是axios方式去请求后台打开文件的controller
    axios
      .post("/api/SaveAndSearch/index")
      .then((response) => {
        this.docSearchs = response.data.docSearchs;
      })
      .catch(function (err) {
        console.log(err);
      });
  },
  methods: {
    editWord(id) {
      POBrowser.openWindow(
        "Word?id=" + id,
        "width=1200px;height=800px;",
        this.value
      );
    },
    //控件中的一些常用方法都在这里调用，比如保存，打印等等
    onColor(td) {
      td.style.backgroundColor = "#87ffc7";
    },

    offColor(td) {
      td.style.backgroundColor = "";
    },

    getFocus() {
      var str = document.getElementById("Input_KeyWord").value;
      if (str == "请输入关键字") {
        document.getElementById("Input_KeyWord").value = "";
      }
    },

    lostFocus() {
      var str = document.getElementById("Input_KeyWord").value;
      if (str.length <= 0) {
        document.getElementById("Input_KeyWord").value = "请输入关键字";
      }
    },

    copyKeyToInput(key) {
      document.getElementById("Input_KeyWord").value = key;
    },

    mySubmit() {
      this.value = encodeURI(document.getElementById("Input_KeyWord").value);
      document.getElementById("form1").submit = axios
        .post("/api/SaveAndSearch/index?Input_KeyWord=" + this.value)
        .then((response) => {
          this.docSearchs = response.data.docSearchs;
        })
        .catch(function (err) {
          console.log(err);
        });
    },
  },
  mounted: function () {
    
  }
};
</script>
<style scoped>
div {
  margin: 0;
  padding: 0;
  font: 12px/1.6 "宋体", Arial, Helvetica, sans-serif;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

div,
h2,
h3,
input,
textarea,
p,
th,
td {
  margin: 0;
  padding: 0;
  font-size: 12px;
  list-style: none;
}

h2 {
  color: #00517d;
  padding-bottom: 10px;
  font-size: 16px;
  display: block;
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
}

h3 {
  display: block;
  font-size: 1.17em;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
  color: #666;
  height: 24px;
  line-height: 24px;
  padding-bottom: 10px;
}

.mc {
  margin: 0 auto;
}

/*talbe style*/

.zz-talbeBox {
  width: 698px;
}

.zz-talbeBox h2 {
  height: 24px;
  line-height: 24px;
  padding-top: 10px;
  color: #666;
}

.zz-talbe,
.listpage,
.listpage-700 {
  width: 698px;
  clear: both;
  border-collapse: collapse;
  border-spacing: 0;
  border-top: 1px solid #a2c5d9;
  border-left: 1px solid #a2c5d9;
}

.listpage {
  width: 790px;
}

.zz-talbe thead th {
  height: 40px;
  line-height: 40px;
  text-align: left;
  text-indent: 10px;
  padding: 0;
  border-right: 1px solid #a2c5d9;
  border-bottom: 1px solid #a2c5d9;
  background: #edf8fe;
  font-weight: bold;
  color: #666;
}
a:hover {
  cursor: pointer;
}
</style>

